<template>
  <div :class="['main-item',FuList.completed?'completed':'']">
    <input type="checkbox" v-model='FuList.completed'>
    <label>{{FuList.text}}</label>
    <button @click="delItem"></button>
  </div>
</template>
<script>
  export default {
    name: "MainItem",
    props: {
      FuList: Object,
    },
    data() {
      return {};
    },
    methods: {
      delItem() {
        this.$emit("del", this.FuList.id);
      },
    },
  };
</script>
<style lang="stylus" scoped>
  @import '../../../assets/styles/mixins.styl'
  @import '../../../assets/styles/theme.styl'

  .main-item
    display flex
    justify-content space-between
    padding 10px
    border-top 1px solid rgba(0, 0, 0, 0.1)

    &.completed
      label
        color #d9d9d9
        text-decoration line-through

    &:hover
      button:after
        content 'X'
        color $lightred
        font-size 24px

    input
      width 50px
      height 30px
      text-align center
      cleandefaultStyle()

      &:after
        content url('../../../assets/images/unChecked.svg')

      &:checked:after
        content url('../../../assets/images/Checked.svg')

    label
      font-size 24px
      flex 1
      transition color 0.4s

    button
      cleandefaultStyle()
      width 40px
      background-color transparent
      cursor pointer
</style>

